<template>
  <div class="Hs-nav-bar">
    <uni-nav-bar
      left-icon="back"
      :title="title"
      :color="color"
      :fixed="fixed"
      :border="border"
      @clickTitle="clickTitle"
      @clickLeft="handOnClickBack"
    >
      <view slot="right" class="Hs-nav-bar-right">
        <slot name="right">
          <image v-if="rightIcon" :src="rightIcon" @tap="clickRight"></image>
          <view @click="rightTextClick" v-if="rightText" class="right_text">
            {{ rightText }}
          </view>
        </slot>
      </view>
    </uni-nav-bar>
  </div>
</template>

<script>
export default {
  props: {
    back: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
    rightIcon: {
      type: String,
      default: "",
    },
    fixed: {
      type: [Boolean, String],
      default: true,
    },
    color: {
      type: String,
      default: "#333333",
    },
    statusBar: {
      type: [Boolean, String],
      default: false,
    },
    border: {
      type: [Boolean, String],
      default: false,
    },
    rightText: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  methods: {
    // 点击左侧返回图标
    handOnClickBack() {
      // 自定义方法名并返回对应事件
      if (this.back) {
        this.$emit(this.back);
      } else {
        uni.navigateBack({
          delta: 1,
        });
      }
    },
    clickRight() {
      this.$emit("clickRight");
    },
    clickTitle() {
      this.$emit("clickTitle");
    },
    rightTextClick() {
      this.$emit("rightTextClick");
    },
  },
};
</script>

<style lang="scss" scoped>
.Hs-nav-bar {
  width: 100%;
  /deep/.uni-navbar__header,
  /deep/.uni-navbar__content_view {
    background: #fff !important;
    font-size: 16px !important;
  }
  /deep/.uni-icons {
    color: #333333 !important;
  }
  /deep/.uni-nav-bar-text {
    color: #333333 !important;
  }
  .Hs-nav-bar-right {
    display: flex;
    align-items: center; /*垂直居中*/
    justify-content: center;
    image {
      width: 24px;
      height: 24px;
    }
  }

  .right_text {
    color: #333333;
  }
}
</style>
